﻿<script type="text/javascript">
    var genres = @Html.Raw(Json.Encode(Model));
    
    $(function() {
        render(genres);
    });

    function render(model) {
        $('#GenresContainer').html('');
        $('#GenresTemplate').tmpl(genres).appendTo('#GenresContainer');
    }

    function created(data) {
        genres.push(data);
        render(genres);
    }

    function deleted(data) {
        // volarlo el id de genres
        render(genres);
    }


</script>
<script id="GenresTemplate" type="text/html">
       <tr>
        <td>
            ${Name}
        </td>
        <td>
            ${Description}
        </td>
        <td>
            @Ajax.ActionLink("Delete", "DeleteAjax", new { id = Html.Raw("${GenreId}") }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "deleted" })
        </td>
       <tr/>
</script>
@model IEnumerable<MvcMusicStore.Models.Genre>
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
<input type="button" value="Click me!" onclick="display()" />
@Ajax.ActionLink("Create new Ajax", "CreateAjax", new AjaxOptions { HttpMethod = "POST", OnSuccess = "created" })
@Html.ActionLink("Create New", "Create")
<table id="GenresContainer">
    <tr>
        <th>
        </th>
        <th>
            Name
        </th>
        <th>
            Description
        </th>
    </tr>
</table>
